<template>
    <div class="comment-list">
        <van-loading v-if="loading" type="spinner" class="loading" />
        <van-empty v-else-if="empty" description="还没有人评论哦" />
        <van-list
            v-else
            :finished="true"
            finished-text="没有更多了"
        >
            <comment-item
                v-for="comment in commentList"
                :key="comment.com_id"
                :comment="comment"
                @onLike="$emit('onLike', comment)"
                @onComment="$emit('onComment', comment)"
                :isSub="isSub"
            />
        </van-list>
    </div>
</template>

<script>
import CommentItem from '../comment';

// 组件中大部分的值应该是props而不是data更不能是store
// 共用
// 去定制化 提高自由度 提高扩展性
export default {
    components: {
        CommentItem,
    },
    props: {
        empty: Boolean,
        loading: Boolean,
        commentList: Array,
        isSub: {
            type: Boolean,
            default: false,
        },
    },
}
</script>

<style lang="less">
    @import url('./main.less');
</style>